<script>
import AsudeCom from "../commponents/AsudeCom.vue";
import YkxMessage from '../commponents/ykxMessage.vue'
import bj from "../assets/logo.jpg";
import router from "../router";

export default {
  data() {
    return {
      url: bj
    }
  },
  components: {
    AsudeCom,
    YkxMessage
  },
  methods: {
    jump() {
      // this.$router.push('/commponents/ykxMessage')
      this.$router.push('/Message/MessageIndex')
    },
    removeName() {
      localStorage.removeItem('teacher')
      router.push('/login')
    }

  },
  // mounted:{
  //   
};

function Message() {

}
</script>

<template>
  <div class="common-layout">
    <el-container>
      <el-header>
        <div class="log">
          <el-image style="width: 60px; height: 60px" :src="url" />

          <h4 class="title">家校互动后台管理系统</h4>
        </div>

        <el-button type="primary">首页</el-button>
        <el-button type="primary">家校互动</el-button>
        <el-button type="primary">局校通知</el-button>
        <el-button type="primary" @click="jump">消息统计</el-button>
        <el-button type="primary">用户统计</el-button>
        <el-button type="primary">学校管理</el-button>
        <el-button type="primary" @click="removeName">退出登录</el-button>



      </el-header>
      <el-container>
        <el-aside>
          <AsudeCom />
        </el-aside>
        <el-main>
          <router-view></router-view>



        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<style lang="scss" scoped>
.el-container {
  height: 100%;

  .el-aside {
    background-color: rgb(158, 172, 210);
    width: v-bind(asideWidth);
    transition: all 0.2s;
    opacity: 1;
    width: 200px
  }

  .el-header {
    height: 100px;
    background-color: rgb(21, 118, 203);
    display: flex;
    justify-content: space-between;
    align-items: center;


    .log {
      width: 300px;
      height: 100px;
      display: flex;
      align-items: center;
      padding: 0 10px;
      justify-content: space-around;
    }

    .el-avatar {
      float: right;
    }

    .dat {
      margin-right: 20px;
      margin-top: 5px;
    }
  }

  .el-main {
    background-color: gainsboro;
    background: #fff;
    background-size: cover;
  }
}
</style>
